<template>
	<div class="content">
		
		<el-steps :active="3" align-center>
		  <el-step title="查询信息" description="这是一段很长很长很长的描述性文字"></el-step>
		  <el-step title="制作印章" description="这是一段很长很长很长的描述性文字"></el-step>
		  <el-step title="上传文件" description="这是一段很长很长很长的描述性文字"></el-step>
		  <el-step title="签署文件" description="这是一段很长很长很长的描述性文字"></el-step>
		</el-steps>
		
		<div class="div_content">
		<!-- <el-upload
		  class="upload-demo"
		  ref="upload"
		  :action="fileUrl"
		  :on-preview="handlePreview"
		  :on-remove="handleRemove"
		  :on-success="fileSuccess"
		  :auto-upload="false">
		  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
		  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
		</el-upload>
		<div slot="tip" class="el-upload__tip">只能上传image/word/pdf文件</div> -->
		
		
		<el-upload
		  class="upload-demo"
		  drag
		  :action="fileUrl"
		  :on-preview="handlePreview"
		  :on-remove="handleRemove"
		  :on-success="fileSuccess"
		  :auto-upload="true">
		  <i class="el-icon-upload"></i>
		  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>
		  <br>
		  <div class="el-upload__tip" slot="tip">只能上传image/word/pdf文件</div>
		  </div>
		</el-upload>
		
		<!-- <el-button type="text" style="color:red;" @click="testPost">测试POST请求</el-button>
		<el-button type="text" style="color:red;" @click="testGet">测试GET请求</el-button> -->
		
		</div>
	</div>
</template>

<script>
	import apiURL from '../httpConfig/api.js'
	export default {
	  data() {
	    return {
		  fileUrl:apiURL+'/access/uploadFile',//文件请求url
		 
	    }
	  },
	  methods:{
		  
		//测试post请求
		testPost(){
			//post
			this.$http.post('/access/testPost',{
				phone: "13211233211"
			}).then((res)=>{
				console.log(res)
			　　 alert(res);
			}).catch((err)=>{
			   alert("请求失败") 
			})
			
		},
		//测试get请求
		testGet(){
			//get
			this.$http.get("/access/testGet",{
			　　params:{
			　　　　phone:"13211233211"
			　　}
			}).then((res) => {
			　　console.log(res)
			}).catch((err)=>{
			　　alert("请求失败")
			})
		},
		//提交上传文件请求
		submitUpload() {
			this.$refs.upload.submit();
		},
		//文件上传成功
		fileSuccess(response, file, fileList){
			console.log(response)
			if(response.code == 200){
				var fileId=response.object;
				//跳转页面
				this.$router.push({
				path: '/pdfShow',
				name:"PdfShow",
				params: {
					fileId: fileId
				}
				})
			}else{
				alert(response.msg);
			}
			
		},
		//文件列表移除文件时的钩子
		handleRemove(file, fileList) {
			console.log(file, fileList);
		},
		//点击文件列表中已上传的文件时的钩子
		handlePreview(file) {
			console.log(file);
		}
	  }
	}
</script>

<style scoped>
	/* 中间内容显示 */
	.content{
		padding: 20px;
	}
	
	.div_content{
		padding-top: 50px;
	}
</style>
